<!-- 图标组件 -->

<template>
	<i class="iconfont" :class="[icon, extraClass]" :style="[iconStyle, { color: color, fontSize: size }]" @click="$emit('active')"></i>
</template>

<script>
/**
 * @description 阿里矢量图
 * @example <h-icon icon"图标样式class" iconStyle="图标样式style"></h-icon>
 *
 * @property {String}			icon				矢量图标代码 （默认 h-tubiao ）
 * @property {String}			extraClass			图标样式class
 * @property {Object}			iconStyle			图标样式style
 * @property {String}			size				图标大小（默认 32rpx ）
 * @property {String}			color				图标颜色（默认 #fff ）
 *
 * @event {Function} active			点击图标时触发
 */

export default {
	// 小程序样式穿透
	options: {
		styleIsolation: 'shared'
	},
	name: 'h-icon',
	props: {
		icon: {
			//矢量图标代码
			type: String,
			default: 'h-tubiao'
		},
		extraClass: {
			// 样式
			type: String,
			default: ''
		},
		iconStyle: {
			// 样式
			type: Object,
			default: () => {}
		},
		size: {
			// 图标大小
			type: String,
			default: ''
		},
		color: {
			// 图标颜色
			type: String,
			default: ''
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f9f9f9;
	font-family: '微软雅黑', sans-serif;
	font-size: 28rpx;
	min-height: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

// 网络地址
@import url('https://at.alicdn.com/t/c/font_4484473_e6g1p98w2ec.css');
// 本地地址，需从阿里矢量图中下载相关文件
// @import url('../../static/iconfont.css');

.iconfont {
	font-size: 32rpx;
}
</style>
